<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				position:relative;
			}
			#myVideo{
				border:1px solid black;
			}
			#ad{
				position: absolute;
				left: 50px;
				top:80px;
				display: none;
				color:gold;
				font-weight: bold;
			}
			#play{
				width: 10px;
				height: 10px;
				background:gold;
				/*border-top:transparent;
				border-bottom: transparent ;
				border-right:transparent ;*/
				position: absolute;
				top:150px;
				left: 2px;
				
			}
			#dot{
				width:5px;
				height: 5px;
				background: gold;
				border-radius: 50%;
				position: absolute;
				top:-2px;
				left:-1px;
			}
			#timeaxis{
				width:190px;
				height: 1px;
				background:black;
				border: 1px solid black;
				position: absolute;
				top:155px;
				left:19px;
			}
			#pas{
				width:5px;
				height:2.5px;
				background:gold;
				position: absolute;
				top:155.1px;
				left:19px;
				
			}
			#vol{
				position: absolute;
				top:145px;
				left:219px;
				color:gold;
			}
		</style>
	</head>
	<body>
		<!--video-->
	<video id="myVideo"   autoplay preload="auto" width=300 height="165" 
    	poster="img/card_img1.jpg"
    	src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">
    </video>
    <!--controls-->
    <!--play-->
    <span id="play"></span>
    <div id="timeaxis">
    	<div id="dot"></div>
    </div>
    <div id="pas"></div>
    <span id="vol">
    	vol
    </span>
    <!--ad-->
    <div id="ad">
	    <span>apple</span><input type="checkbox" name="fruits" id="apple" value=""/>
	    <span>banana</span><input type="checkbox" name="fruits" id="banana" value="" />
	    <span>pear</span><input type="checkbox" name="fruits" id="pear" value="" />
    </div>
	</body>
</html>
<script type="text/javascript">
	var myVideo = document.getElementById('myVideo')//获取video元素
	    ,tol = 0
	;
	var ad = document.getElementById('ad');//获取ad元素
	var play = document.getElementById('play');//获取play元素
	var vol = document.getElementById('vol');//获取play元素
	var checkbo= document.getElementsByTagName('input');//获取play元素
	var pas= document.getElementById('pas');//获取play元素
	var n=1;
//总时长

myVideo.addEventListener("loadedmetadata", function(){
    tol = myVideo.duration;//获取总时长
    console.log(tol);
    
});
 //1 play
 play.addEventListener('click',ifplay,false);
 function ifplay(){
 	if(n==1&&judge()){
 		playe();
 	}else{
 		pause();
 	}
 }
 function playe(){ 
     myVideo.play();
     n=0;
	ad.style.display="none";
	play.style.background="gold";
 }

 //2 pause
 function pause(){ 
     myVideo.pause();
     n=1;
     for(var i=0;i<checkbo.length;i++){
     	checkbo[i].value="";
     	checkbo[i].checked=false;
     }
     ad.style.display="block";
	play.style.background="red";
 }
 //设置播放点
 myVideo.addEventListener("timeupdate", function(){
    var currentTime = myVideo.currentTime;
    console.log(currentTime);
    //dot
    dot.style.left=190*currentTime/tol+"px";
    pas.style.width=190*currentTime/tol+"px";
});
function playBySeconds(num){ 
    myVideo.currentTime = num;
}
//音量的获取设置
//音量改变时
myVideo.addEventListener("volumechange", function(){
    var volume = myVideo.volume;//获取当前音量
    console.log(volume);//在调试器中打印
});
//设置音量
vol.onmouseover=setVol(0.5);
function setVol(num){ 
    myVideo.volume = num;
}
//ad and answer
//answer:apple
var apple=document.getElementById('apple')
var pear=document.getElementById('pear')
var banana=document.getElementById('banana')
ad.addEventListener("click",judge,true)
function judge(e){
	var e=e||window.event;
	e.target.value="true";
	if(apple.value=="true"&&pear.value==""&&banana.value==""){
		console.log("right ，欧巴");
		return true;
	}else{
		return false;
	}
	
}
</script>
